<template>
  <div>
    <!-- 编辑区域开始 -->
    <el-dialog
      v-model="updateDialogVisible"
      title="编辑班级信息"
      width="50%"
      :before-close="handleClose"
    >
      <el-descriptions :column="2" border v-model="updateInfo">
        <el-descriptions-item label="班长">
          <el-input v-model="updateInfo.monitor" />
        </el-descriptions-item>
        <el-descriptions-item label="班级编号">
          <el-input v-model="updateInfo.classId"/>
        </el-descriptions-item>
        <el-descriptions-item label="年度">
          <el-input v-model="updateInfo.year"/>
        </el-descriptions-item>
		  <el-descriptions-item label="批次编号">
          <el-input v-model="updateInfo.batchId"/>
        </el-descriptions-item>
		  <el-descriptions-item label="班级名称">
          <el-input v-model="updateInfo.className"/>
        </el-descriptions-item>
		<el-descriptions-item label="班级数量">
          <el-input v-model="updateInfo.classNumber"/>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateConfirm()">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑区域结束 -->
    <!-- 高级查询开始 -->
    <div v-show="searchVisible" class="top-search">
      <el-form ref="advancedSearchRef">
        <el-row :gutter="20" style="margin-bottom: 10px">
          <el-col>
            <span class="textCss">姓名 :</span>
            <el-input prop="name" placeholder="姓名" style="width: 230px">
            </el-input>

            <span class="textCss">性别 :</span>
            <el-input prop="year" placeholder="性别" style="width: 230px">
            </el-input>

            <span class="textCss">入伍乡镇 :</span>
            <el-input
              prop="loginNumber"
              placeholder="入伍乡镇"
              style="width: 230px"
            >
            </el-input>

            <span class="textCss">政治面貌 :</span>
            <el-input placeholder="政治面貌" style="width: 230px" prop="batch">
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <span class="textCss">兵种 :</span>
            <el-input placeholder="兵种" style="width: 230px" prop="nation">
            </el-input>
            <span class="textCss">学历 :</span>
            <el-input
              placeholder="学历"
              style="width: 230px"
              prop="cultureralProgram"
            >
            </el-input>

            <span class="textCss">身份证号 :</span>
            <el-input
              placeholder="身份证号"
              style="width: 230px"
              prop="householdType"
            >
            </el-input>
            <div class="footer-button">
              <el-button type="primary" plain>查询</el-button>
              <el-button type="info" plain @click="reset">重 置</el-button>
              <el-button @click="advancedQueryClose">关 闭</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 高级查询结束 -->
    <!-- 顶部功能按钮开始 -->
    <el-header class="top_button">
      <div class="left-panel">
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="warning" plain @click="exportfun">导出</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <div class="mt-4">
            <el-input
              v-model="searchData"
              placeholder="查询内容"
              class="input-with-select"
            >
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="姓名" value="姓名" />
                  <el-option label="性别" value="性别" />
                  <el-option label="批次" value="批次" />
                  <el-option label="网登编号" value="网登编号" />
                  <el-option label="户籍类型" value="户籍类型" />
                  <el-option label="学历" value="学历" />
                  <el-option label="民族" value="民族" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
                ></el-button>
              </template>
            </el-input>
          </div>

          <el-button type="primary" plain @click="advancedQuery"
            >高级查询</el-button
          >
        </div>
      </div>
    </el-header>
    <!-- 顶部功能按钮结束 -->
    <!-- 主体表格开始 -->
  </div>
      <MyTable :columns="columns" ref="tableRef" :data="allList">
      <el-table-column type="selection" width="55" />
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          :fixed="index == 0"
          :label="item.name"
          :prop="item.prop"
          v-if="item.show"
          show-overflow-tooltip
          sortable
        />
      </template>
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot="scope">
          <el-button
            type="text"
            size="small"
            @click="updateForm(scope.row.classId)"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="small"
            style="color: red"
            @click="tableDelete(scope.row.classId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </Mytable>
    <!-- 主体表格结束 -->
    <!-- 分页区开始 -->
    <div class="page">
      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 分页区结束 -->

</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import {
  showPageApi,
  exportApi,
  deleteApi,
  editFormInfoApi,
  editFormApi,
} from "@/api/preservice/classInfo";
export default defineComponent({
  name: "classInfo",
  setup() {
    onMounted(() => {
      showPage_methods.showPage();
    });
    const editForm_state = reactive({
      updateDialogVisible: false,
      updateInfo:{

	  },
      updateId: null,
    });
    const editForm_methods = {
      async updateForm(id) {
        editForm_state.updateDialogVisible = true;
        editForm_state.updateId = id;
        const res = await editFormInfoApi.get(id);
		console.log(res);
		// console.log(...res.data.classId);
        editForm_state.updateInfo = res.data;
		console.log(editForm_state.updateInfo);
      },
      async updateConfirm() {
        const id = editForm_state.updateId;
        const res = await editFormApi.put(id, editForm_state.updateInfo);
        if (res.code === 200) {
          this.$message.success("修改信息成功！");
          showPage_methods.showPage();
          editForm_state.updateDialogVisible = false;
        } else {
          this.$message.error("修改出错，请稍后重试！");
          editForm_state.updateDialogVisible = false;
        }
      },
      // 确定关闭弹窗
      handleClose() {
        editForm_state.updateDialogVisible = false;
      },
    };
    // 查询和导出部分
    const search_state = reactive({
      // 姓名查询
      // 查询内容
      searchData: "",
      //  选择字段
      selectField: "",
      // 高级查询
      searchVisible: false,
      advancedSearch: {
        name: "",
        year: "",
        loginNumber: "",
        batch: "",
        nation: "",
        cultureralProgram: "",
        householdType: "",
        age: "",
        doubleQualifiedId: "",
        isOrderSoldiers: "",
        registrationTime: "",
        sex: "",
      },
    });
    const search_methods = {
      get_nowTime() {
        var date = new Date();
        var year = date.getFullYear(); //  返回的是年份
        var month = date.getMonth() + 1; //  返回的月份上个月的月份，记得+1才是当月
        var dates = date.getDate(); //  返回的是几号
        const nowTime = `(${year}/${month}/${dates})`;
        return nowTime;
      },
      // 导出
      async exportfun() {
        const nowTime = search_methods.get_nowTime();
        let blobUrl = await exportApi();
        const a = document.createElement("a");
        a.style.display = "none";
        a.download = `班级信息${nowTime}`;
        a.href = blobUrl;
        a.click();
        a.remove();
        ElMessage.success("导出成功");
      },
      async tableDelete(id) {
        console.log(id);
        const confirmResult = await this.$confirm(
          "此操作将永久删除该信息, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch((err) => {
          return err;
        });
        if (confirmResult !== "confirm") {
          return this.$message.info("已取消删除");
        }
        const res = await deleteApi.delete(id);
        console.log(res);
        this.$message.success("已成功删除该订单");
        showPage_methods.showPage();
      },
      //   重置高级查询
      reset() {
        //   element表单方法没实现
        //  _this.$refs.advancedSearchRef.resetFields();
        search_state.advancedSearch = {};
      },
      advancedQuery() {
        search_state.searchVisible = true;
      },
      //   关闭高级查询
      advancedQueryClose() {
        search_state.searchVisible = false;
        search_state.advancedSearch = {};
      },
    };
    const showPage_state = reactive({
      // 表头行字段
      columns: [
        { name: "班级编号", show: true, prop: "classId" },
        { name: "年度", show: true, prop: "year" },
        { name: "批次编号", show: true, prop: "batchId" },
        { name: "班级名称", show: true, prop: "className" },
        { name: "班级人数", show: true, prop: "classNumber" },
        { name: "班长", show: true, prop: "monitor" },
      ],
      // 页面展示数据
      allList: [],
      //分页数据
      page: {
        current: 1,
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      visible: false,
    });
    const showPage_methods = {
      // 待删除 （无用代码）

      changeColumn(columns) {
        showPage_state.columns = columns;
      },
      async showPage() {
        const res = await showPageApi.get(showPage_state.page);
        showPage_state.page.total = res.data.total;
        showPage_state.allList = res.data.result;
        console.log(res);
      },
      // 改变页码
      handleCurrentChange(newSize) {
        showPage_state.page.pageNum = newSize;
        // 重新获取数据
        showPage_methods.showPage();
      },
      handleSizeChange(newPage) {
        showPage_state.page.pageSize = newPage;
        showPage_methods.showPage();
      },
    };

    return {
      ...toRefs(showPage_state),
      ...showPage_methods,
      ...toRefs(editForm_state),
	// editForm_state,
      ...editForm_methods,
      //   ...toRefs(delete_state),
      //   ...delete_methods,
      ...toRefs(search_state),
      ...search_methods,
    };
  },
});
</script>

<style  scoped>
.form-closex {
  display: flex;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.top-search {
  width: 100%;
  margin-top: 20px;
}
.top-search .textCss {
  font-size: 15px;
  margin-left: 30px;
  margin-right: 10px;
}

.top-search .inputCss {
  width: 210px;
}
.footer-button {
  margin-left: 80px;
  display: inline-block;
}

.top_button {
  display: flex;
  justify-content: space-between;
}
</style>




